<template>
  <div class="back" :style="backgroundDiv">
    <div
      class="headbar"
      :style="{'background':themeColor}"
      :class="$store.state.app.collapse?'position-collapse-left':'position-left'"
    >
      <span class="head">制药行业有毒有害化学品数据库</span>
      <span style="position: relative;top: auto;float: right;margin-right: 1%">
        <a href="/DatabaseHome">
          <i style="color: #FFFFFF;font-size: 25px" class="el-icon-close"></i>
        </a>
        </span>
<!--      <span class="toolbar">-->
<!--&lt;!&ndash;      管理员&ndash;&gt;-->
<!--      <el-menu-->
<!--        class="el-menu-demo"-->
<!--        :background-color="themeColor"-->
<!--        :text-color="themeColor"-->
<!--        :active-text-color="themeColor"-->
<!--        mode="horizontal"-->
<!--      >-->
<!--        <el-menu-item index="5" v-if="user.name==='guest'" v-popover:popover-guest>-->
<!--          &lt;!&ndash; 用户信息 &ndash;&gt;-->
<!--          <span class="user-info">{{ user.nickname }}</span>-->
<!--           <el-popover ref="popover-guest" placement="bottom-end" trigger="click" :visible-arrow="false">-->
<!--           <div class="personal-footer" @click="logout">-->
<!--      <li class="fa fa-sign-out"></li>-->
<!--      退出-->
<!--          </div>-->
<!--          </el-popover>-->

<!--        </el-menu-item>-->
<!--        <el-menu-item v-else v-popover:popover-personal index="6">-->
<!--          &lt;!&ndash; 用户信息 &ndash;&gt;-->
<!--          <span class="user-info">{{ user.nickname }}</span>-->
<!--          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">-->
<!--            <personal-panel :user="user"/>-->
<!--          </el-popover>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->
<!--    </span>-->
      <span class="title">Explore Chemistry</span>
      <!--    搜索功能-->
      <!--    bug 默认选中其他染料-->
      <div style="margin-top: 15px;">
        <el-input
          placeholder="请输入内容"
          v-model="senior.keyword"
          clearable
          class="input-with-select"
          @keyup.native.enter="chuancan();EnterElement()">
          <el-button slot="append" icon="el-icon-search" @click="chuancan();EnterElement()"></el-button>
        </el-input>
      </div>
      <div class="link1">
        <el-radio-group v-model="senior.radio">
          <el-radio label="1" style="margin-right:70px">中文名</el-radio>
          <el-radio label="2" style="margin-right:70px">英文名</el-radio>
          <el-radio label="3" style="margin-right:70px">CAS</el-radio>
          <el-radio label="4" style="margin-right:70px">SMILES</el-radio>
          <el-radio label="5" style="margin-right:70px">类别</el-radio>
<!--          <el-radio label="6" style="margin-right:70px">功能</el-radio>-->
        </el-radio-group>
      </div>
      <!--此处类型应为type更改 还未完成最终效果,出现助剂无法点击的bug-->

    </div>
   </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Action from '@/components/Toolbar/Action'
import NoticePanel from '@/views/Core/NoticePanel'
import MessagePanel from '@/views/Core/MessagePanel'
import PersonalPanel from '@/views/Core/PersonalPanel'
import LoginPanel from '@/views/Core/LoginPanel'
import Hamburger from '@/components/Hamburger'
import Cookies from "js-cookie"
import axios from "axios";

export default {
  components: {
    Hamburger,
    Action,
    NoticePanel,
    MessagePanel,
    PersonalPanel,
    LoginPanel,
  },
  data() {
    return {
      user: {
        name: 'guest',
        avatar: '',
        nickname: '游客',
        registeInfo: '注册时间：2018-12-20 '
      },
      backgroundDiv: {
        backgroundImage: 'url(' + require('@/assets/uc.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'

      },
      senior: {
        keyword: '',
        radio: ''
      },
      type: '',
      cl: '',
      mount: '3',
      activeIndex: '1',
      pageRequest: {
        pageNumber: 1,
        pageSize: 15,
        keyword: '',
        cl: '',
        radio: ''
      },
      pageRequestbingran: {
        pageNumber: 1,
        pageSize: 15
      },
      pageRequestrongji: {
        pageNumber: 1,
        pageSize: 15
      },
      pageRequestyuanliao: {
        pageNumber: 1,
        pageSize: 15
      },
      pageResult: {},
      pageResultshengwumei: {},
      pageResultwujiwu: {},
      pageResultyoujigaofenzi: {},
      pageResultyoujixiaofenzi: {},
      pageResultyoujijinshuyan: {},
      pageResultbingran: {},
      pageResultfensan: {},
      pageResulthuanyuan: {},
      pageResulthuoxing: {},
      pageResultjianxing: {},
      pageResultyuanliao: {},
      pageResultrongji: {}
    }
  },

  mounted() {
    this.sysName = '印染加工处理过程关键点源环境释放量评估程序'
    var user = sessionStorage.getItem('user')//返回user对应的值
    var nickname = sessionStorage.getItem('nickname')
    if (user) {
      this.user.name = user
      this.user.nickname = nickname
    }
  },
  created() {
    this.displayyuanliao()
    this.displayrongji()
  },
  methods: {
    onRadioChange(e) {
      // 当点击已经选中的把 activeModel 置空，就是取消选中，并返回
      if (this.activeModel === e) {
        this.activeModel = ''
        return
      }
      // 不是选中，选中当前点击 Radio
      this.activeModel = e
      // 选中操作
    },
    displayyuanliao(data) {
      this.cl = '原料'
      // console.log(this.cl)
      this.pageRequestyuanliao.cl = this.cl
      this.$api.element.find(this.pageRequestyuanliao).then((res) => {
        this.pageResultyuanliao = res.data
        console.log(this.pageResultyuanliao)
        this.pageResultyuanliao = res.data
        this.resultFlag = true
      }).then(data != null ? data.callback : '')
    },
    displayrongji(data) {
      this.cl = '溶剂'
      // console.log(this.cl)
      this.pageRequestrongji.cl = this.cl
      this.$api.element.find(this.pageRequestrongji).then((res) => {
        this.pageResultrongji = res.data
        console.log(this.pageResultrongji)
        this.pageResultrongji = res.data
        this.resultFlag = true
      }).then(data != null ? data.callback : '')
    },
    chuancan: function(data) {
      var value = this.cl
      sessionStorage.setItem('cl', value)
      sessionStorage.setItem('keyword', this.senior.keyword)
      sessionStorage.setItem('radio', this.senior.radio)
      console.log("`````````````````````````",this.cl)
    },
    EnterElement() {
      this.$router.push('/')
    },
    openWindow(url) {
      window.open(url)
    },
    selectNavBar(key, keyPath) {
      console.log(key, keyPath)
    },
    // 折叠导航栏
    onCollapse: function () {
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    },
    logout: function () {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("user")
          Cookies.remove("token")
          // this.$router.push("/")
          // this.$router.go(0);
          this.$api.login.logout().then((res) => {
            console.log("注销成功")
            this.$router.push("/")
            this.$router.go(0)
          }).catch(function (res) {
          })
        })
        .catch(() => {
        })
    },
    // // 语言切换
    // changeLanguage(lang) {
    //     lang === '' ? 'zh_cn' : lang
    //     this.$i18n.locale = lang
    //     this.langVisible = false
    // }
    EnterDatabaseHome() {
      this.$router.push("/DatabaseHome")
    },
    EnterHome() {
      this.$router.push("/")
      // this.$options.methods.found.bind(this)()
    }

  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse

    })
  }

}
</script>

<style scoped lang="scss">
/*div{
text-align:center;
}*/
.headbar {
  position: fixed; /*固定定位*/
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 0px;
  border-left-style: solid;
}

.head {
  font-size: 25px;
  font-weight: 550;
  float: left;
  margin-left: 12px;
  color: #fff;
}

.toolbar {
  float: right;
}

.title {
  position: fixed;
  top: 32%;
  left: 0;
  right: 0;
  font-size: 55px;
  bottom: 450px;
  color: #000000;
  word-spacing: 0.5em;

}

div > > > .el-input > input {
  height: 60px;
  font-size: 16px;
}

.el-radio {
  color: black;
}

.input-with-select {
  background-color: #fff;
  width: 58%;
  height: 60px;
  position: fixed;
  top: 42%;
  left: 22%;
  right: 0;

}

.link1 {
  position: fixed;
  top: 53%;
  left: 30%;
  //right: 25%;
  //width: 70%;
  //right: ;
  /deep/{
    .el-radio{
      //从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
      .el-radio__label{
        //color: #FFFFFF !important;
        font-size: 18px;
      }
    }
  }
}

.title1 {
  position: fixed;
  top: 330px;
  left: 22%;
  //right: 0;

}

.title2 {
  position: fixed;
  top: 500px;
  left: 22%;
}

.link2 {
  position: fixed;
  top: 330px;
  left: 35%;
  //right: 150px;
}

.link3 {
  position: fixed;
  top: 390px;
  left: 35%;

}

.link4 {
  position: fixed;
  top: 450px;
  left: 35%;
}

.link5 {
  position: fixed;
  top: 500px;
  left: 35%;
}

.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}

.user-info {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0px 10px 10px;
    float: right;
  }
}

.badge {
  line-height: 18px;
}

.position-left {
  left: 0px;
}

.back {
  width: 100%;
  height: 100%;
}
#outCSS  /deep/ .el-radio__inner {
  background: #FFF;
  border-color: #FFF;}
#outCSS  /deep/ .el-radio__label {
  color: #000000;}

.position-collapse-left {
  left: 0px;
}
</style>
